<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="../js/jq.js"></script>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    html,
    body {
        background-color: #F5F5F5;
    }

    .cart_topwarp {
        width: 100%;
        height: 126px;
        background: white;
        border-bottom: 2px solid #FF6700;
    }

    .cart_top {
        width: 1226px;
        height: 126px;
        margin: 0 auto;


        overflow: hidden;
    }

    .cart_top div {
        float: left;

    }

    .liltie_logo {
        width: 50px;
        background: #FF6700;
        color: white;
        margin-left: 20px;
        margin-top: 34px;
    }

    .desc,


    .reslogin,
    .shoptip {
        height: 50px;
        line-height: 50px;
        margin-top: 34px;
        margin-left: 80px;

        color: #75758B;
    }

    .mycat {
        height: 50px;
        line-height: 50px;
        margin-top: 34px;
        margin-left: 80px;

    }

    .desc {
        margin-left: 20px;
    }

    /* , */
    .reslogin {
        margin-right: -50px;
        color: #FF6700;
        display: none;
    }

    .no_login {
        margin-right: -60px;
        height: 50px;
        line-height: 50px;
        margin-top: 34px;
        margin-left: 80px;

        color: #75758B;
        /* display: none; */
    }

    
    .head {
        width: 1000px;
        height: 40px;
        margin: 10px auto;
        background-color: blanchedalmond;
    }

    .down {
        width: 1000px;
        margin: 10px auto;
        text-align: center;
        font-size: 24px;
    }

    .down li {
        height: 150px;
        background: rgb(226, 240, 240);
    }

    .down h5 {
        display: block;
        width: 200px;
        height: 80px;
        float: left;
        margin-left: 20px;
        line-height: 26px;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .down h6 {
        display: block;
        width: 200px;
        height: 80px;
        float: left;
        margin-left: 20px;
        line-height: 26px;
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .down button {
        width: 80px;
        height: 50px;
        float: left;
        border: solid 1px grey;
        background-color: rgb(240, 240, 240);
        margin-left: 20px;
        margin-top: 10px;
        line-height: 50px;
        font-size: 14px;
        cursor: pointer;
    }

    .down img {
        width: 80px;
        height: 80px;
        float: left;
        margin-left: 20px;
    }

    .down .num {
        /* width: 460px; */
        height: 60px;
        /* background: chartreuse; */
        float: left;
        margin-top: 5px;
        overflow: hidden;
    }

    .down .add1 {
        width: 30px;
        height: 30px;
        background: rgb(231, 220, 208);
        font-size: 30px;
        float: left;
        margin: 15px 0;
        line-height: 30px;
        text-align: center;
    }

    .down .num .num11 {
        width: 30px;
        height: 30px;
        float: left;
        background: rgb(250, 246, 250);
        font-size: 14px;
        line-height: 30px;
        margin: 15px 15px;
    }

    .llll {
        float: left;
        width: 100px;
        height: 36px;
        line-height: 36px;
        font-size: 16px;
    }

    .down .checkbox {
        width: 60px;
    }

    .money {
        width: 80px;
        height: 36px;
        background: rgb(198, 193, 193);
        border: solid 1px;
        font-size: 16px;
        color: grey;
        border-radius: 5px;
        margin-left: 300px;
        /* float: left; */

    }

    .trueTime {
        height: 36px;
        width: 280px;
        float: left;
        line-height: 36px;
        margin-left: 100px;
        font-size: 16px;
    }
</style>

<body>
    <div class="cart_topwarp">
        <div class="cart_top">
            <div class="liltie_logo"> <img src="http://s02.mifile.cn/assets/static/image/mi-logo.png" alt=""></div>
            <div class="mycat"><span style="font-size: 30px;font-weight: bolder;">我的购物车</span></div>
            <div class="desc"><span
                    style="font-size: 12px;font-weight:bolder;margin-right: 50px;">温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</span>
            </div>
            <div class="no_login"><span>登录</span></div>
            <div class="reslogin"><span>已登录</span></div>
            <div class="shoptip"><span>我的订单</span></div>
        </div>
    </div>
    <!-- 添加部分 -->
    <div class="head">
        <div class="llll"><input type="checkbox" value="" class="all" />全选</div>
        <button class="money">结算</button>
        <div class="trueTime">总共0件商品，总共0元</div>
    </div>
    <ul class="down clean">

    </ul>

    <script src="../js/axios.min.js"></script>
    <script>
        // 请求我的购物车列表
        /* 
            查询用户购物车中的商品 接口

接口地址：
接口请求方式：get
接口参数：
     id  用户id
        */
        let uid = localStorage.getItem('uid')
        console.log(uid);
        let no_login  =document.querySelector('.no_login')
        let reslogin = document.querySelector('.reslogin')
        if(!uid){
            no_login.style.display = 'block'
        }else{
            reslogin.style.display = 'block'
            no_login.style.display ='none'
        }
        let token = localStorage.getItem('token')
        console.log(token);
        // http://jx.xuzhixiang.top/ap/api/cart-delete.php

        async function Loadshop() {
            let url = 'http://jx.xuzhixiang.top/ap/api/cart-list.php'
            let params = {
                id: uid
            }
            let res = await axios.get(url, {
                params
            })
            console.log(res);
            let CartArr = res.data.data
            console.log(CartArr);
            let resArred = CartArr.map(Arr => `
            <li class='clean'>
                    <div class="checkbox">
                      <input type="checkbox" class='one' value="">
                    </div>
                    <img src=${Arr.pimg}></img>
                    <h5>${Arr.pname}</h5>
                    <h6>${Arr.pprice}元</h6>
                   
                    <div class='num'>
                      <input type="button"value="+"onclick = "addNumEvent(${Arr.pid},window.event)">
                      <input type = "type" value="${Arr.pnum}" class="num11">
                      <input type="button"value="-" onclick = "subNumberEvent(${Arr.pid},window.event)">
                    </div>
                    <button onclick= "delEvent(${Arr.pid},window.event)">删除商品</button>
					      </li>
          `)

            let deletes = document.querySelectorAll('.delete')
            console.log(deletes);
            var down = document.querySelector(".down");
            down.innerHTML += resArred.join('');
        }
        Loadshop()
        // 执行删除按钮:事件绑定
        async function delEvent(pid, evt) {
            let num = document.querySelector('.num')
            console.log(num);
            console.log(pid, evt);
            // 调用删除用户购物车接口
            const scshoppingAPI = `http://jx.xuzhixiang.top/ap/api/cart-delete.php`
            let params = {
                uid,
                pid
            }
            let res = await axios.get(scshoppingAPI, {
                params
            })
            console.log(res); //删除成功
            location.reload()
        }
        /*   
        给加按钮添加事件 - 让输入框的数量加1   发起请求 
        
        更新购物车中商品数量 接口

接口地址：http://jx.xuzhixiang.top/ap/api/cart-update-num.php
接口请求方式：get
接口参数：
     uid  用户id
     pid  商品id
     pnum  要添加的商品数量
        */
        async function addNumEvent(pid, evt) {
            // 让输入框的数量加1

            let n = parseInt(evt.target.nextElementSibling.value)
            console.log(n);
            n++;
            evt.target.nextElementSibling.value = n;
            // 发起请求
            let updata_num = 'http://jx.xuzhixiang.top/ap/api/cart-update-num.php'
            let params = {
                uid,
                pid,
                pnum: n
            }
            let res = await axios.get(updata_num, {
                params
            })
            console.log(res.data);
            if (n >= 20) {
                alert("该商品不能超过20件")
                console.log(evt);
                evt.target.disabled = true
                // .disabled = false
            }
        }
        // 减商品
        async function subNumberEvent(pid, evt) {
            // 让输入框的数量加1   
            let n = parseInt(evt.target.previousElementSibling.value)

            console.log(n);
            n--;
            if (n <= 0) {
                //调用删除接口
                delEvent(pid, evt)

            }
            evt.target.previousElementSibling.value = n
            // 发起请求
            let url = 'http://jx.xuzhixiang.top/ap/api/cart-update-num.php'
            let params = {
                uid,
                pid,
                num: n
            }
            let res = await axios.get(url, {
                params
            })
            console.log(res.data);

        }
        // 单选和全选
        // all-sel-btn
        // single-sel-btn

        // 全选
        let allBtn = document.querySelector(".all")
        allBtn.onchange = function () {
            console.log(this.checked);
            let singleBtns = document.querySelectorAll('.one')
            singleBtns.forEach(btn => btn.checked = this.checked)



        }
        // ajax 请求以后才有 单选按钮
        let singleBtns = document.querySelectorAll('.one')
        console.log(singleBtns);
        document.onchange = function (evt) {
            if (evt.target.classList.contains('one')) {
                console.log('single');


                // 获取所有单选按钮
                let singleBtns = document.querySelectorAll('.one')
                console.log(singleBtns);
                // 判断 是否所有的单选按钮 checked都是true 
                // [...singleBtns] 转为真数组
                let flag = [...singleBtns].every(v => v.checked == true);
                allBtn.checked = flag;

                let jisuan = function () {
                    let moneys = 0;
                    let nums = 0;
                    for (let i = 0; i < $(".one:checked").length; i++) {
                        console.log(
                            $(".one:checked").eq(i).parent().parent().find($("h6")).text()
                        );

                        let price = parseInt(
                            $(".one:checked").eq(i).parent().parent().find($("h6")).text()
                        );

                        let num = parseInt(
                            $(".one:checked")
                            .eq(i)
                            .parent()
                            .parent()
                            .find($(".num"))
                            .find($(".num11"))
                            .text()
                        );

                        console.log(price);
                        console.log(num);

                        let money = price * num;
                        moneys += money;

                        nums += num;
                    }
                    return "总共" + nums + "件商品，总共" + moneys + "元";
                };
                $(".money").click(function () {
                    alert("结算成功" + jisuan());
                    location.reload();
                });
            }

        }


        // 计算总价
    </script>
</body>

</html>